<template>
    <div>
      
  
      <el-card>
  
      <el-input v-model="queryCan.channelName" size="small" style="width: 240px;margin:0px 5px" placeholder="请输入名称" clearable></el-input>
      <el-select v-model="queryCan.stateThour" size="small" placeholder="请选择状态" style="width: 240px;margin:0px 5px" clearable>
        <el-option v-for="item in ThourState" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="Thoroughfare()">搜索</el-button>

      <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="AddThoroug()">新增通道</el-button>

      <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>

      <!-- <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['thoroughfare:manage:export']"
        >导出</el-button> -->
      <br>
      <br>
  
  
      <el-table :data="tableData.pageList"  style="width: 100%" id="apiIndex">
        <el-table-column type="index" width="50" fixed align="center">
        </el-table-column>
  
        <el-table-column fixed prop="channelName" align="center" width="160" label="名称" />
        <el-table-column fixed prop="gateway" align="center" label="网关组" />
        <el-table-column fixed align="center" label="通道分流">
          <template slot-scope="scope">
            <span v-if="scope.row.channelShunt == 0">未启用</span>
            <span v-else-if="scope.row.channelShunt == 1">启用</span>
            <span v-else>~</span>
          </template>
        </el-table-column>
        <el-table-column fixed align="center" label="计费模式">
          <template slot-scope="scope">
            <span v-if="scope.row.billingModel == 0">全部计费模式</span>
            <span v-else-if="scope.row.billingModel == 1">成未计费</span>
            <span v-else-if="scope.row.billingModel == 2">成功计费 </span>
            <span v-else-if="scope.row.billingModel == 3">提交计费</span>
            <span v-else>~</span>
          </template>
        </el-table-column>
        <el-table-column fixed align="center" label="MNC计费">
          <template slot-scope="scope">
            <span v-if="scope.row.mncBilling == 0">未启用</span>
            <span v-else-if="scope.row.mncBilling == 1">启用</span>
            <span v-else>~</span>
          </template>
        </el-table-column>
        <el-table-column fixed prop="shadowGateway" align="center" label="影子网关">
        </el-table-column>
        <el-table-column fixed align="center" label="影子网关状态">
          <template slot-scope="scope">
            <span v-if="scope.row.shadowGatewayType == 0">未启用</span>
            <span v-else-if="scope.row.shadowGatewayType == 1">启用</span>
            <span v-else>~</span>
          </template>
        </el-table-column>
        <el-table-column fixed prop="remark" align="center" label="备注" />
        <el-table-column fixed prop="state" align="center" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 0">未启用</span>
            <span v-else-if="scope.row.state == 1">启用</span>
            <span v-else>~</span>
          </template>
        </el-table-column>
        <!-- 产品操作0 -->
        <el-table-column label="产品操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" plain @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          </template>
  
        </el-table-column>
        <!-- 产品操作1 -->
      </el-table>
      <!-- 新增 -->
      <el-dialog title="新增通道" center width="30%" :visible.sync="adddialogThour" :close-on-click-modal="false">
        <el-form :model="addformThur">
  
          <el-form-item label="名称:" :label-width="formLabelWidth">
            <el-input class="inputwith" v-model="addformThur.channelName" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="网关组:" :label-width="formLabelWidth">
            <el-input class="inputwith" v-model="addformThur.gateway" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="通道分流:" :label-width="formLabelWidth">
            <el-select v-model="addformThur.channelShunt" placeholder="请选择" class="inputwith">
              <el-option v-for="item in shunt" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="计费模式:" :label-width="formLabelWidth">
            <el-select v-model="addformThur.billingModel" placeholder="请选择" class="inputwith">
              <el-option v-for="item in Billingmode" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="MNC计费:" :label-width="formLabelWidth">
            <el-select v-model="addformThur.mncBilling" placeholder="请选择" class="inputwith">
              <el-option v-for="item in MNCBiling" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="状态:" :label-width="formLabelWidth">
            <el-select v-model="addformThur.state" placeholder="请选择" class="inputwith">
              <el-option v-for="item in ThourState" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="影子网关:" :label-width="formLabelWidth">
            <el-input class="inputwith" v-model="addformThur.shadowGateway"
              autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="影子网关状态:" :label-width="formLabelWidth">
            <el-select v-model="addformThur.shadowGatewayType" placeholder="请选择" class="inputwith">
              <el-option v-for="item in ThourshadowState" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="备注:" :label-width="formLabelWidth">
            <el-input class="inputwith" v-model="addformThur.remark" autocomplete="off"></el-input>
          </el-form-item>
  
  
          <!-- 产品备注1 -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="AddThour()">确 定</el-button>

          <el-button @click="adddialogThour = false">取 消</el-button>
        </div>
      </el-dialog>
      <!-- 新增 -->
  
  
      <!-- 修改 -->
  
      <el-dialog title="修改通道" center width="30%" :visible.sync="editdialogThour" :close-on-click-modal="false">
        <el-form :model="editformThur">
  
          <el-form-item label="名称:" :label-width="formLabelWidth">
            <el-input class="inputwith" v-model="editformThur.channelName" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="网关组:" :label-width="formLabelWidth">
            <el-input class="inputwith" v-model="editformThur.gateway" autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="通道分流:" :label-width="formLabelWidth">
            <el-select v-model="editformThur.channelShunt" placeholder="请选择" class="inputwith">
              <el-option v-for="item in shunt" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="计费模式:" :label-width="formLabelWidth">
            <el-select v-model="editformThur.billingModel" placeholder="请选择" class="inputwith">
              <el-option v-for="item in Billingmode" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="MNC计费:" :label-width="formLabelWidth">
            <el-select v-model="editformThur.mncBilling" placeholder="请选择" class="inputwith">
              <el-option v-for="item in MNCBiling" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="状态:" :label-width="formLabelWidth">
            <el-select v-model="editformThur.state" placeholder="请选择" class="inputwith">
              <el-option v-for="item in ThourState" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="影子网关:" :label-width="formLabelWidth">
            <el-input class="inputwith" v-model="editformThur.shadowGateway"
              autocomplete="off"></el-input>
          </el-form-item>
  
          <el-form-item label="影子网关状态:" :label-width="formLabelWidth">
            <el-select v-model="editformThur.shadowGatewayType" placeholder="请选择" class="inputwith">
              <el-option v-for="item in ThourshadowState" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
  
          <el-form-item label="备注:" :label-width="formLabelWidth">
            <el-input class="inputwith" v-model="editformThur.remark" autocomplete="off"></el-input>
          </el-form-item>
  
  
          <!-- 产品备注1 -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="editThour()">确 定</el-button>
          <el-button @click="editdialogThour = false">取 消</el-button>

        </div>
      </el-dialog>
      <!-- 修改 -->
  
      <br>
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.totalCount" class="paging">
      </el-pagination>
    </el-card>
    </div>
  </template>
  <script>
  import { AddThoroughfare, QuerThoroughfare, EditThoroughfare } from '@/api/thoroughfare/thorou'
  export default {
  name: "Thouro",
    data() {
      return {
        queryCan:{
          pageCode: 1,
        pageSize: 10,
        channelName: '',
        stateThour: '',
        },
        tableData: [],
        formLabelWidth: "120px",
        editdialogThour: false,
        adddialogThour:false,
        shunt: [
          {
            value: 0,
            label: '未启用'
          },
          {
            value: 1,
            label: '启用'
          },
        ],
        ThourshadowState: [
          {
            value: 0,
            label: '未启用'
          },
          {
            value: 1,
            label: '启用'
          },
        ],
        ThourState: [
          {
            value: 0,
            label: '未启用'
          },
          {
            value: 1,
            label: '启用'
          },
        ],
        MNCBiling: [
          {
            value: 0,
            label: '未启用'
          },
          {
            value: 1,
            label: '启用'
          },
        ],
        Billingmode: [
          {
            value: 0,
            label: '全部计费模式'
          },
          {
            value: 1,
            label: '成未计费'
          },
          {
            value: 2,
            label: '成功计费'
          },
          {
            value: 3,
            label: '提交计费'
          },
        ],
        editformThur: {
          id: '',
          channelName: '',
          gateway: '',
          channelShunt: '',
          billingModel: '',
          mncBilling: '',
          state: '',
          shadowGateway: '',
          shadowGatewayType: '',
          remark: ''
        },
        addformThur:{
          channelName: '',
          gateway: '',
          channelShunt: '',
          billingModel: '',
          mncBilling: '',
          state: '',
          shadowGateway: '',
          shadowGatewayType: '',
          remark: ''
        }
      }
    },
    async created() {
      this.Thoroughfare()
    },
    methods: {
      // 新增网关
      async AddThoroug(){
        this.adddialogThour = true
      },
      async AddThour(){
        let addRes = await AddThoroughfare(this.addformThur)
        if(addRes.code == 200){
          this.adddialogThour = false

          this.Thoroughfare()
          this.$message({
            message: addRes.data,
            type: "success",
          });
        }else{
          this.$message({
            message: addRes.msg,
            type: "error",
          });
        }
      },
  
  
      handleEdit(index, row) {
        this.editdialogThour = true
        this.editformThur.id = row.id
        this.editformThur.channelName = row.channelName
        this.editformThur.gateway = row.gateway
        this.editformThur.channelShunt = row.channelShunt
        this.editformThur.billingModel = row.billingModel
        this.editformThur.mncBilling = row.mncBilling
        this.editformThur.state = row.state
        this.editformThur.shadowGateway = row.shadowGateway
        this.editformThur.shadowGatewayType = row.shadowGatewayType
        this.editformThur.remark = row.remark
  
  
      },
      async editThour() {
        let res = await EditThoroughfare(this.editformThur)
        if (res.code == 200) {
          this.$message({
            message: res.data,
            type: "success",
          });
  
          this.editdialogThour = false
          this.Thoroughfare()
        }else{
          this.$message({
            message: res.msg,
            type: "success",
          });
        }
      },
  
      //  查询
      async Thoroughfare() {
        let thoroug = {
          pageCode: this.queryCan.pageCode,
          pageSize: this.queryCan.pageSize,
          channelName:this.queryCan.channelName,
          state: this.queryCan.stateThour
        }
        let resThoroug = await QuerThoroughfare(thoroug)
        if (resThoroug.code == 200) {
          this.tableData = resThoroug.data
        }
      },
      resetQuery(){
        this.queryCan.channelName = ""
        this.queryCan.stateThour = ''
        this.Thoroughfare()
      },
      async handleSizeChange(val) {
        this.queryCan.pageSize = val;
        this.Thoroughfare();
      },
      async handleCurrentChange(val) {
        this.queryCan.pageCode = val;
        this.Thoroughfare();
      },
      // handleExport(){
      // this.download('thoroughfare/manage/export', {
      //   ...this.queryCan
      // }, `manage_${new Date().getTime()}.xlsx`)
      // }
    },
  };
  
  
  </script>
  <style scoped>
  .inputwith{
    width: 80%;margin:1px 0px;
  }
  .paging{
    display: flex;
    align-items: center;
  justify-content: flex-end;    
  }
</style>